import React from 'react'
import { CloseOutlined } from '@ant-design/icons'
import { useSelector } from 'react-redux'
//引入组件
import CartPayBar from './CartPayBar/CartPayBar'
import Meal from './../../Meals/Meal/Meal'
import Backdrop from './../../UI/Backdrop/Backdrop'
//引入样式
import classes from './CartPay.module.css'

const CartPay = (props) => {
	const pickedMeals = [...useSelector(state => state.counter.value)]

	let totalPrice = 0

	pickedMeals.forEach(m => {
		totalPrice = totalPrice + m.pickedNum * m.price
	})

	return (
		<Backdrop>
			<div className={classes.Container}>
				<div className={classes.Wrapper}>
					<div className={classes.CloseButton}>
						<CloseOutlined onClick={props.togglePay}/>
					</div>
					<div className={classes.List}>
						<div className={classes.ListHeader}>餐品详情</div>
						<div className={classes.ListDetail}>
							{pickedMeals.map(m => (
								<Meal key={m.id} {...m} isPay={true} haveDesc={false} />
							))}
						</div>
						<div className={classes.ListTotalPriceWrap}>
							<div className={classes.ListTotalPrice}>
								<p className={classes.Price}>
									<span>合计 ￥</span>
									{totalPrice}
								</p>
							</div>
							<div className={`${classes.GapLeft} ${classes.Gap}`}></div>
							<div className={`${classes.GapRight} ${classes.Gap}`}></div>
						</div>
					</div>
				</div>
				<CartPayBar />
			</div>
		</Backdrop>
	)
}

export default CartPay
